<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <title>sy首页</title>
    <link rel="stylesheet" href="../static/Semantic-UI-master/dist/semantic.min.css" th:href="@{/Semantic-UI-master/dist/semantic.min.css}">
    <link rel="stylesheet" href="../static/css/custom.css" th:href="@{/css/custom.css}">
</head>
<body>
<!--头部导航-->
<nav class="ui attached segment m-padded-tb-mini">
    <div class="ui container">
        <div class="ui menu secondary font-size-middle font-y-center">

                <span class="ui teal header item">
                <img src="../static/imges/1.png" th:src="@{/imges/1.png}" class="image-size-mini"/>
                </span>
            <a class="item active" th:href="@{/}"><i class="home icon"></i>首页</a>
            <a class="item" href="User/syclass.html" th:href="@{/sy/syuser/syclass}"><i class="building icon"></i>sy课堂</a>
            <a class="item" href="User/aboutwe.html" th:href="@{/sy/syuser/aboutwe}"><i class="info icon"></i>关于我们</a>
            <!--                用条件判断动态实现页面变化-->
            <div class="item right" th:if="${session.User}">
                <div class="ui simple dropdown">
                    <img class="ui avatar image dropdown" src="../static/imges/user.jpg" th:src="${session.User.userImg}">
                    <span th:text="${session.User.userName}"></span>
                    <div class="menu">
                        <a href="User/userPC.html" th:href="@{/sy/syuser/gopc}" target="_blank" class="item"><i class="user circle icon"></i>个人主页</a>
                        <a href="User/userPC.html" th:href="@{/sy/syuser/gopc}" target="_blank" class="item"><i class="edit outline icon"></i>管理中心</a>
                        <a href="/sy/syuser/logout" class="item"><i class="sign out alternate icon"></i>退出登录</a>
                    </div>
                </div>
            </div>
            <!--                注册在这-->
            <div class="item right" th:unless="${session.User}">
                <a onClick="join('注册','/sy/syuser/goregistered','10001','600','350')" href="javascript:;" class="item">注册</a>
                <a href="User/userlogin.html" th:href="@{/sy/syuser/gologin}" class="item">登录</a>
            </div>


        </div>

    </div>
</nav>
<!--广告-->
<div class="ui container m-padded-tb-middle">
    <div class="ui grid">
        <!--  左侧滚动广告  -->
        <div class="eleven wide column slide">
            <ul class="slide_pics">
                <li>
                    <a><img src="../static/imges/gg.jpg" th:src="@{/imges/gg.jpg}" class="ui image image-size"></a>
                </li>
                <li>
                    <a><img src="../static/imges/doyoudo.jpg" th:src="@{/imges/doyoudo.jpg}" class="ui image image-size"></a>
                </li>
                <li>
                    <a><img src="../static/imges/guangg.jpg" th:src="@{/imges/guangg.jpg}" class="ui image image-size"></a>
                </li>
            </ul>
            <div class="prev"><i class="chevron left icon ui inverted"></i></div>
            <div class="next"><i class="chevron right icon ui inverted"></i></div>
            <ul class="points"></ul>
        </div>
        <!--   右侧个人 -->
        <div class="five wide column">
            <div class="ui segment">
                <a href="#">
                    <span th:if="${session.User}">
                        <img class="ui centered medium image" style="height: 188px !important;width: auto !important;" src="/imges/timg.jpg" th:src="${session.User.userImg}">
                    </span>
                    <span th:unless="${session.User}">
                        <img class="ui centered medium image" style="height: 188px !important;width: auto !important;" src="../static/imges/timg.jpg">
                    </span>
                </a>
                <p class="font-x-center m-padded-tb-big"><span th:if="${session.User}"><span th:text="${session.User.userName}"></span></span></p>
                <div th:if="${session.User}">
                    <!--          TODO          -->
                    <span class="item" >还有一个消息提醒没做</span><br>

                    <div class="m-padded-tb-middle font-x-center">
                        <button onclick="goclass();" href="javascript:void(0);" type="button" class="ui teal button" id="myclass">我加入的课程</button>
                    </div>
                </div>
                <div th:unless="${session.User}">
                    <div class="m-padded-tb-middle font-x-center">
                        <a href="/sy/syuser/gologin" class="ui teal button" id="">去登录</a>
                    </div>
                </div>

            </div>
        </div>
    </div>
</div>

<!--中间导航栏-->
<div class="ui container">
    <!--        左侧导航栏-->
    <div class="ui grid segment">
        <div class="eleven wide column">
            <div class="ui menu secondary" id="chcourse">
                <a class="item active font-tmd" id="allcourse">全部课程</a>
                <a class="item font-tmd" id="oscourse">操作系统</a>
                <a class="item font-tmd" id="linuxcourse">Linux操作系统</a>
                <a class="item font-tmd" id="searchp">全部内容</a>
            </div>

        </div>
        <!---------------------------           右侧搜索栏TOP------------------------------------->
        <div class="five wide column">
            <div class="ui grid guding" style="padding-top: 13px">
                <input class="searchinput prompt" type="text" id="searchinput" placeholder="想学什么……">
                <button class="searchbutton ui teal button" id="searchbutton"><i class="search icon"></i></button>
            </div>
        </div>
        <!---------------------------           右侧搜索栏END------------------------------------->
    </div>

</div>

<!--中间内容-->
<div class="ui container m-padded-tb-middle" id="concourse">
    <!--   教学视频 -->
    <!--加载全部视频-->
    <div id="showAll" class="ui three column grid divFocus" style="display: flex">
        <div class="column" th:each="course:${session.courses}">
            <a class="font-color" href="User/details.html" target="_blank" th:href="@{/sy/course/details(id=${course.courseId})}">
                <div class="ui segment m-sp-div">
                    <img class="ui centered medium image" src="../static/imges/timg.jpg" th:src="${course.courseImge}">
                    <div class="ui container font-tmd font-x-center shipinneirong">
                        <p class="font-size-mini" th:text="${course.courseName}"></p>
                        <span>作者：<span th:text="${course.courseAuthor}"></span></span>
                    </div>

                </div>
            </a>
        </div>
    </div>
    <!--加载操做系统视频-->
    <div id="showOS" class="" style="display: none">
        <div class="column" th:each="course:${session.courseList}">
            <a class="font-color"  href="User/details.html" target="_blank" th:href="@{/sy/course/details(id=${course.courseId})}">
                <div class="ui segment m-sp-div">
                    <img class="ui centered medium image" src="../static/imges/timg.jpg" th:src="${course.courseImge}">
                    <div class="ui container font-tmd font-x-center shipinneirong">
                        <p class="font-size-mini" th:text="${course.courseName}"></p>
                        <span>作者：<span th:text="${course.courseAuthor}"></span></span>
                    </div>

                </div>
            </a>
        </div>
    </div>
<!--    linux-->
    <div id="showLinux" class="" style="display: none">
        <div class="column" th:each="course:${session.courselikeLise}">
            <a class="font-color"  href="User/details.html" target="_blank" th:href="@{/sy/course/details(id=${course.courseId})}">
                <div class="ui segment m-sp-div">
                    <img class="ui centered medium image" src="../static/imges/timg.jpg" th:src="${course.courseImge}">
                    <div class="ui container font-tmd font-x-center shipinneirong">
                        <p class="font-size-mini" th:text="${course.courseName}"></p>
                        <span>作者：<span th:text="${course.courseAuthor}"></span></span>
                    </div>
                </div>
            </a>

        </div>
    </div>
<!--搜索内容显示-->
    <div class="" style="display: none" id="searchtext">
        <p class="font-tmd" style="font-size: 30px;text-align:center !important;">搜索内容显示......</p>
    </div>
<!--    加载更多-->
    <div class="ui wide column m-padded-tb-big grid">
        <button class="fluid ui button" id="loadMore" type="button">加载更多</button>
    </div>

</div>
<!--返回顶部-->
<div class="ui inverted fanhui" id="fanhui">
    <i class="arrow alternate circle up outline icon"></i>
</div>
<!--footer-->
<footer class="ui vertical segment b-color m-padded-tb-big">
    <div class="ui container">
        <div class="ui grid">
            <div class="eight wide column">
                <a class="item" href="User/aboutwe.html" th:href="@{/sy/syuser/aboutwe}">关于我们</a><br><br><br>
                <span class="ui teal header" style="display: inline;">
                        <img src="../static/imges/1.png" th:src="@{/imges/1.png}"/></span>
                <span class="font-tmd">&nbsp;生命可以随心所欲，但不可以随波逐流。</span>
            </div>

            <div class="eight wide column font-tmd">
                计科172 梁瑜<br>
                2020/10/28
            </div>
        </div>
    </div>
</footer>
</body>
<script src="../static/js/jquery-1.12.4.min.js" th:src="@{/js/jquery-1.12.4.min.js}"></script>
<script src="../static/js/jquery-ui.min.js" th:src="@{/js/jquery-ui.min.js}"></script>
<script src="../static/Semantic-UI-master/dist/semantic.min.js" th:src="@{/Semantic-UI-master/dist/semantic.min.js}"></script>
<script src="../static/js/sy.min.js" th:src="@{/js/sy.min.js}"></script>
<script src="../static/js/lunbo.js" th:src="@{/js/lunbo.js}"></script>
<script type="text/javascript" src="../static/lib/layer/2.4/layer.js" th:src="@{/lib/layer/2.4/layer.js}"></script>
<script type="text/javascript" src="../static/h-ui.admin/js/H-ui.admin.js" th:src="@{/h-ui.admin/js/H-ui.admin.js}"></script>
<script type="text/javascript" th:inline="javascript">
    //To load more button
    $("#loadMore").click(function(){
        const divid = $(".divFocus").attr("id");
        $.ajax({
            cache: false,
            type: 'post',
            url: '/sy/course/appendpage',
            data: {'courseWho':divid},
            success: function (data) {
                var htmls = '';
                for(let i=0; i<data.length; i++){
                    var add ='<div class="column">\n' +
                        '            <a class="font-color" target="_blank" href="/sy/course/details?id='+data[i].courseId+'">\n' +
                        '                <div class="ui segment m-sp-div">\n' +
                        '                    <img class="ui centered medium image" src="'+data[i].courseImge+'">\n' +
                        '                    <div class="ui container font-tmd font-x-center shipinneirong">\n' +
                        '                        <p class="font-size-mini">'+data[i].courseName+'</p>\n' +
                        '                        <span>作者：<span>'+data[i].courseAuthor+'</span></span>\n' +
                        '                    </div>\n' +
                        '\n' +
                        '                </div>\n' +
                        '            </a>\n' +
                        '        </div>';


                    htmls += add;
                }
                if(divid=="showAll"){
                    $("#showAll").append(htmls);
                    if([[${session.total<15}]]){
                        $("#showAll").append('<p class="font-tmd" style="font-size: 15px;width:100%;text-align:center !important;">没有更多内容了......<p/>');
                    }
                }
                if(divid=="showOS"){
                    $("#showOS").append(htmls);
                    if([[${session.total<15}]]){
                        $("#showOS").append('<p class="font-tmd" style="font-size: 15px;width:100%;text-align:center !important;">没有更多内容了......<p/>');
                    }
                }
                if(divid=="showLinux"){
                    $("#showLinux").append(htmls);
                    if([[${session.total<15}]]){
                        $("#showLinux").append('<p class="font-tmd" style="font-size: 15px;width:100%;text-align:center !important;">没有更多内容了......<p/>');
                    }
                }
            },
            error: function () {
                alert("出错了")
            }
        })
    })


    //开启小窗口
    function join(title,url,id,w,h){
        layer_show(title,url,w,h);
    }
    //搜索
    $("#searchbutton").click(function () {
        var text = $("#searchinput").val();
        $.ajax({
            type: "get",
            cache: false,
            url: "/sy/course/search",
            data: {"searchstr":text},
            contenType: "application/json;charset=utf-8",
            success: function (data) {
                $("#chcourse>a").removeClass("active");
                $("#chcourse>a").eq(3).addClass("active");
                for(let i=0;i<$("#concourse>div").length-1;i++){
                    $("#concourse>div").eq(i).hide();
                    $("#concourse>div").eq(i).removeClass("ui three column grid");
                }

                $("#concourse>div").eq(3).addClass("ui three column grid");
                $("#concourse>div").eq(3).show();
                if(data.length==0){
                    $("#searchtext").html('<p class="font-tmd" style="font-size: 30px;text-align:center !important;">没有搜索内容......<p/>');
                }else {
                    var htmls = '';
                    for(let i=0; i<data.length; i++){
                        var add ='<div class="column">\n' +
                            '            <a class="font-color" target="_blank" href="/sy/course/details?id='+data[i].courseId+'">\n' +
                            '                <div class="ui segment m-sp-div">\n' +
                            '                    <img class="ui centered medium image" src="'+data[i].courseImge+'">\n' +
                            '                    <div class="ui container font-tmd font-x-center shipinneirong">\n' +
                            '                        <p class="font-size-mini">'+data[i].courseName+'</p>\n' +
                            '                        <span>作者：<span>'+data[i].courseAuthor+'</span></span>\n' +
                            '                    </div>\n' +
                            '\n' +
                            '                </div>\n' +
                            '            </a>\n' +
                            '        </div>';


                        htmls += add;
                    }
                    $("#searchtext").html(htmls);
                }
            },
            error: function (message) {
                alert("出错了")
            }
        })

    })


    //点击导航栏分类按钮，显示相应内容
    $("#chcourse>a").click(function () {
        const index = $(this).index()

        $("#chcourse>a").removeClass("active");
        $("#chcourse>a").eq(index).addClass("active");
        for(let i=0;i<$("#concourse>div").length-1;i++){
            $("#concourse>div").eq(i).hide();
            $("#concourse>div").eq(i).removeClass("ui three column grid divFocus");
        }

        $("#concourse>div").eq(index).addClass("ui three column grid divFocus");
        $("#concourse>div").eq(index).show();
    })

    //到我的课程去
    function goclass() {
        if([[${session.User}]]==="" ||[[${session.User}]]==null){
            alert("你还没有登录");
            window.location.replace("/sy/syuser/gologin");
        }else {
            window.location.replace("/sy/xktable/showmyclass");

        }
    }

</script>
</html>